<template>
  <footer class="footer">
    <div class="footer_detail">
      <div class="main">
        <!-- <div class="Introduction-left"> -->
          <!-- <img src="~/static/img/logo_footer.png" /> -->
         <!-- <h1>关于我们</h1>
          <h2>
            {{ web_info.ABOUT_US }}
          </h2>
        </div> -->
        <div class="main_center">
          <!-- <div class="main_item line"></div> -->
         <!-- <div
            class="main_item"
            style="margin-left:80px;margin-right: 35px;"
            v-show="friend_links_list.length > 0"
          >
            <p>{{ $t("locale.components.pc.Footer.t2") }}</p>
            <h2 v-for="(item, index) in friend_links_list" :key="index">
              <a :href="item.url" target="_blank">{{ item.name }}</a>
            </h2>
          </div> -->
        </div>
        <!-- <div class="main_item qrcode">
          <div class="qrcode_box">
            <div class="img_box">
              <img
                :src="web_info.BOTTOM_QR_CODE || require('~/static/img/qr.png')"
              />
            </div>
            <div class="qrcode_text"> -->
              <!-- <h3>{{ $t("locale.components.pc.Footer.t3") }}</h3> -->
         <!--     <h3>扫码关注“{{web_info.SYSTEM_NAME}}”公众号获取更多文章，文档等咨询</h3>
            </div>
          </div>
        </div> -->

        <!-- <div class="main_item line"></div> -->
      </div>
      <div class="copyright">
        <!-- <p v-show="web_info.ADVERTISEMENT_SWITCH == 1">
          Copyright © {{ new Date().getFullYear() }}
          <a href="http://www.keelea.com" target="_blank">KEELEA.COM</a> All
          Rights Reserved.
          {{ $t("locale.components.pc.Footer.t4") }}
        </p> -->
        <p>
			福建益玖软件科技有限公司 {{ $t("locale.components.pc.Footer.t5") }}
          <!-- {{ web_info.COMPANY_NAME }} {{ $t("locale.components.pc.Footer.t5") }} -->
         <!-- | <a href="javascript:;">{{web_info.SYSTEM_NAME}}服务协议</a> | <a href="javascript:;">侵权投诉</a> |
          <a href="javascript:;">问题反馈</a> | <a href="javascript:;">帮助</a> -->
        </p>
        <!-- <div class="main_item line"></div> -->
       <!-- <p>
          <a href="https://beian.miit.gov.cn" target="_blank"
            >{{ web_info.ICP }}</a
          >
          <a
            target="_blank"
            :href="
              `http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=${web_info.POLICE_RECORD}`
            "
            >{{ web_info.POLICE_RECORD }}</a
          >
        </p> -->
      </div>
    </div>
    

    <!-- <ul class="contact">
      <li>
        <a class="contact_link">联系电话：020-83184836</a>
      </li>
      <li>
        <a class="contact_link">QQ客服：2480461146</a>
      </li>
      <li>
        <a class="contact_link">商务合作邮箱：bd@mailehudong.com</a>
      </li>
    </ul>-->
  </footer>
</template>

<script>
import { mapState, mapActions, mapMutations } from "vuex";
export default {
  data() {
    return {};
  },
  computed: {
    ...mapState({
      web_info(state) {
        return state.web_info;
      },
      friend_links_list(state) {
        return state.friend_links_list;
      }
    })
  },
  created() {}
};
</script>

<style lang="scss" scoped>
.footer {
  position: relative;
  // z-index: 9;
  color: #888888;
  font-size: 14px; /*no*/
  width: 100%;
  min-width: 1200px;
  background-color: #30343b;
  .footer_detail {
    // height: 306px;
    // width: 100%;
    width: 1200px;
    margin: 0 auto;
    padding-bottom: 30px;
    .main {
      padding: 50px 0; /*no*/
      display: flex;
      margin: auto;
      width: 1200px; /*no*/
      overflow: hidden;
      box-sizing: border-box;
      .Introduction-left {
        width: 500px;
        > h1 {
          margin-top: 20px;
          font-size: 22px;
          font-weight: 500;
          color: rgb(255, 255, 255);
        }
        > h2 {
          font-size: 16px;
          font-weight: 500;
          margin-top: 20px;
          line-height: 18px;
          letter-spacing: 1px;
          color: rgb(255, 255, 255);
        }
      }
      .main_item {
        > p {
          margin-top: 20px;
          font-size: 20px;
          font-weight: 700;
          color: #fff;
        }
        > h2 {
          font-size: 16px;
          font-weight: 400;
          font-family: Arial, Helvetica, sans-serif;
          margin-top: 20px;
          line-height: 15px;
          letter-spacing: 2px;
          > a {
            text-decoration: none;
            color: #fff;
          }
        }
      }
      .content {
        margin-left: 25px; /*no*/
        .contact_logo {
          margin-bottom: 30px; /*no*/
          width: 186px; /*no*/
        }
        > ul {
          margin: 0;
          padding: 0;
          li {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            margin-bottom: 25px; /*no*/
            list-style: none;
            color: #fff;
            font-size: 14px; /*no*/
            > img {
              margin-right: 10px; /*no*/
              width: 20px; /*no*/
            }
            > a {
              text-decoration: none;
              color: #fff;
              &:visited,
              &:hover {
                color: #fff;
              }
            }
          }
        }
      }
      .logo {
        width: 265px; /*no*/
        margin-right: 80px; /*no*/
        > img {
          margin-top: 65px; /*no*/
        }
      }
      .main_center {
        display: flex;
        width: 209px;
        overflow: hidden;
      }
      .line {
        margin-top: 25px; /*no*/
        width: 968px; /*no*/
        height: 1px; /*no*/
        background-color: #ffffff;
      }
      .qrcode {
        flex: 1;
        .qrcode_box {
          margin-top: 22px; /*no*/
          width: 200px;
          float: right;
          // height: 306px; /*no*/
          .img_box {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            > img {
              width: 120px; /*no*/
              height: 120px; /*no*/
              margin-bottom: 20px;
            }
          }
          .qrcode_text {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            font-weight: 400;
            line-height: 20px;
            align-items: center;
            color: rgb(255, 255, 255);
            font-size: 14px; /*no*/
          }
        }
      }
    }
    // .contact {
    //   display: block;
    //   padding: 0;
    //   margin: 0 auto;
    //   margin-bottom: 10px; /*no*/
    //   text-align: center;
    //   li {
    //     display: inline;
    //     margin-right: 25px; /*no*/
    //     list-style: none;
    //     a {
    //       color: inherit;
    //       font-size: inherit;
    //       text-decoration: none;
    //     }
    //   }
    // }
    .copyright {
      display: block;
      margin: 0 auto;
      text-align: center;
      .line {
        margin: 5px auto 5px auto;
        width: 1200px; /*no*/
        height: 1px; /*no*/
        background-color: #ffffff;
        text-align: center;
      }
      > p {
        color: #ffffff;
        font-size: 13px;
        font-style: SourceHanSansSC-regular;
        margin-top: 10px;
        > a {
          color: #ffffff;
          font-size: 13px;
          font-style: SourceHanSansSC-regular;
          margin-top: 10px;
          &:active,
          &:hover {
            color: #ffffff;
          }
        }
      }
    }
  }
}
</style>
